const url = 'http://124.223.14.236:3001'
let pageNum = 1;
let totalNum = 0;
let orderBy = 'id';
let sortBy = 'desc';
const myId = localStorage.getItem('id');
getNoteList()
function getNoteList(call) {
  axios({
    method: 'GET',
    url: url + '/api/notes',
    params: {
      pageSize: 5,
      pageNum,
      order: orderBy,
      sort: sortBy,
    },
  }).then(function (res) {
    console.log(res);
    rande(res)
  });
  
}
// 渲染
function rande(res){
  let totalNum = res.data.data.total;
  const list = res.data.data.list;
  document.querySelector('ul.comm-list').innerHTML = list
      .map((item, index) => {
        const { avatar, content, id, sex, time, user_id, username, vip } = item;
        return `
        <li class="comm-item">
          <div class="avatar" style="background-image: url('${
            url + '/public/avatar/default_empty.png'
          }');"></div>
          <div class="info">
            <p class="name ${vip ? 'vip' : ''}">
              ${username}
              ${
                vip
                  ? '<img alt="" src="https://gw.alicdn.com/tfs/TB1c5JFbGSs3KVjSZPiXXcsiVXa-48-48.png" />'
                  : ''
              }
            </p>
            <p class="time">
              <span>${new Date(+time)
                .toLocaleDateString()
                .replaceAll('/', '-')}</span>
              <span class="del" data-id=${id} style="display:${
          +myId === +user_id ? '' : 'none'
        }">删除</span>
            </p>
            <p>
              ${content}
            </p>
          </div>
        </li>
      `;
      })
      .join('');

    // 渲染总数
    $('.comm-head sub').html(`(${totalNum})`)
}

 // 添加留言
 const textarea = document.querySelector('.comm-input textarea');
// 清空内容
 $('.comm-input textarea').val('')
  // 检测输入法，并记录文字数量
  let isChinese = false;
  textarea.addEventListener('compositionstart', function (ev) {
    // 该事件在开始输入中文时触发
    isChinese = true;
  });

  textarea.addEventListener('compositionend', function (ev) {
    // 该事件有在输入中文结束触发
    document.querySelector('.word').innerHTML = `${this.value.length}/100`;
    isChinese = false;
  });

  textarea.addEventListener('input', function () {
    // 输入英文时，触发
    if (isChinese) return;
    if (this.value.length <= 100) {
      document.querySelector('.word').innerHTML = `${this.value.length}/100`;
    }else{
      isChinese = false
    }
  });
  // 分页
  document.querySelector('.next').onclick = function () {
    if (Math.ceil(totalNum / 10) === pageNum) return alert('已经是最后一页了');
    pageNum++;
    getNoteList()
  };
  document.querySelector('.prev').onclick = function () {
    if (pageNum === 1) return alert('已经是第一页了');
    pageNum--;
    getNoteList()
  };